<template>
  <div class="sidebar">
    <Menu ref="menu" :active-name="activeName" width="auto" :open-names="openNames" @on-select="handleSelect">
      <Menu-item name="/baseInfo">
        <Icon type="ios-home-outline"/>
        基本信息
      </Menu-item>
      <Menu-item name="/channelManger">
        <Icon type="document-text"/>
        渠道管理
      </Menu-item>
    </Menu>
  </div>
</template>

<script>
  export default {
    name: 'sidebar',
    data () {
      return {
        activeName: '/baseInfo',
        openNames: []
      }
    },
    created () {
      this.update()
    },
    methods: {
      handleSelect (name) {
        this.$router.push('/appManager/' + this.$route.params.id + name)
      },
      update (route) {
        const path = route ? route.path : this.$route.path
        const openName = path.split('/')[3]
        const activeName = '/' + openName

        this.$set(this, 'activeName', activeName)
        this.$set(this, 'openNames', [openName])

        this.$nextTick(() => {
          this.$refs.menu.updateActiveName()
          this.$refs.menu.$children.forEach((item) => {
            item.opened = false
          })
          this.$refs.menu.updateOpened()
        })
      }
    }
  }
</script>

<style lang="scss" scoped src="./styles/index.scss">
</style>
